border-color = 1px solid #F2F6FC
op-height = 40px

/* 路由内容 */
.v-note-wrapper
  position relative
  min-width 300px
  min-height 300px
  display flex
  flex-direction column
  background-color #fff
  text-align left
  border border-color
  border-radius 4px

  &.fullscreen
    position fixed
    left 0
    right 0
    bottom 0
    top 0
    margin 0
    height auto
    z-index 1501

  .v-note-op
    padding 1px
    width 100%
    display flex
    white-space pre-line
    flex none
    min-height op-height
    user-select none
    border-bottom border-color
    border-radius 4px 4px 0 0
    background-color #fff
    z-index 1

    .v-left-item, .v-right-item
      flex 1
      min-height op-height
      box-sizing border-box

      .op-icon-divider
        height op-height
        border-left 1px solid #e5e5e5
        margin 0 6px 0 4px
        vertical-align -10%;

      .op-icon
        box-sizing border-box
        display inline-block
        cursor pointer
        height 28px
        width 28px
        margin 6px 0 5px 0
        font-size 15px
        padding 3.5px 5px 5px 3.5px
        color #757575
        border-radius 5px
        text-align center
        background none
        border none
        outline none
        line-height 1
        //vertical-align middle

        &.dropdown-wrapper
          line-height 18px

        &.selected
          color rgba(0, 0, 0, 0.8)
          background #eaeaea

        &:hover
          color rgba(0, 0, 0, 0.8)
          background #e9e9eb

        svg
          width 0.9rem !important
          height 0.9rem !important
          vertical-align -17%;

      &.transition
        .op-icon
          transition all 0.2s linear 0s

    .v-right-item
      text-align right
      padding-right 6px
      max-width 30%

    .v-left-item
      text-align left
      padding-left 6px

  .v-note-panel
    z-index 0
    position relative
    border-top none
    display flex
    flex 1
    width 100%
    box-sizing border-box
    overflow hidden

    .v-note-edit.divarea-wrapper
      flex 0 0 50%
      width 50%
      padding 0
      overflow-y hidden
      overflow-x hidden
      box-sizing border-box
      cursor text
      border-bottom-left-radius: 4px;

      &.transition
        transition all 0.2s linear 0s

      &.single-edit
        width 100%
        flex 0 0 100%
        overflow-y auto

      &.single-show
        width 0
        flex 0 0 0
        display none

      .content-div
        width 100%
        padding 20px 25px
        box-sizing border-box
        outline 0 none
        border none !important
        color #2c3e50
        font-size 16px

      .content-input-wrapper
        width 100%
        height 100%

      .CodeMirror
        height 100%
        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        
      // see https://github.com/codemirror/CodeMirror/issues/4089
      // see https://github.com/weseek/growi/pull/4335/files#diff-78ff15df4aed531ef623f1eabbf0b948ff74f96a31ffc605b12c4bd8b73ed344R51
      .CodeMirror textarea
        font-size: 2rem;
    .v-note-show
      flex 0 0 50%
      width 50%
      overflow-y auto
      padding 0 0
      transition all 0.2s linear 0s

      &.single-show
        flex 0 0 100%
        width 100%

      .v-show-content, .v-show-content-html
        width 100%
        height 100%
        padding 8px 25px 15px 25px
        overflow-y auto
        box-sizing border-box
        overflow-x hidden
        scrollbar()

    .v-note-navigation-wrapper
      display flex
      position absolute
      width 250px
      right 0
      top 0
      bottom 0
      height 100%
      flex-direction column
      background-color rgba(255, 255, 255, 0.98)
      border-left border-color
      border-right border-color

      &.transition
        transition all 0.1s linear 0s
      @media only screen and (max-width 768px)
        width 50%

      &.slideTop-enter-active, &.slideTop-leave-active
        height 100%

      &.slideTop-enter, &.slideTop-leave-active
        height 0

      .v-note-navigation-title
        height 50px
        width 100%
        border-bottom border-color
        flex none
        line-height @height
        font-size 16px
        box-sizing border-box
        padding 0 12px 0 18px

        .v-note-navigation-close
          float right
          color #606266
          font-size 18px
          cursor pointer

          &:hover
            color #303133

      .v-note-navigation-content
        overflow-y auto
        flex 1
        scrollbar()
        padding 8px 0

        h1, h2, h3, h4, h5, h6
          margin 2px 0
          font-weight 500
          font-size 17px
          color #2185d0
          cursor pointer
          line-height normal
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          padding 0 12px
          border-bottom none

          &:hover
            color #483D8B
            text-decoration-line underline

        h2
          padding-left 27px
          font-size 17px

        h3
          padding-left 42px
          font-size 17px

        h4
          padding-left 58px
          font-size 15px

        h5
          padding-left 72px
          font-size 15px

        h6
          padding-left 87px
          font-size 15px

  .v-note-read-model
    position relative
    display none
    width 100%
    height 100%
    background #fbfbfb
    padding 30px 8% 50px 8%
    overflow-y auto
    scrollbar()
    box-sizing border-box

    &.show
      display block

  &.shadow
    border none

// box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1) 

.v-note-img-wrapper
  position fixed
  display flex
  justify-content center
  align-items center
  left 0
  right 0
  top 0
  bottom 0
  background rgba(0, 0, 0, 0.7)
  z-index 1600
  transition all 0.1s linear 0s

  &.fade-enter-active, &.fade-leave-active
    opacity 1

  &.fade-enter, &.fade-leave-active
    opacity 0

  img
    flex 0 0 auto
    z-index 3

  i
    font-size 28px
    position absolute
    right 15px
    top 8px
    color rgba(255, 255, 255, 0.7)
    cursor pointer

    &:hover
      color rgba(255, 255, 255, 1)

align()
